<template>
  <a-modal
    title="设备新增"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :model="formData">
      <a-form-item label="设备名称" :rules="[{ required: true, message: '请输入设备名称' }]">
        <a-input v-model:value="formData.name" placeholder="请输入设备名称" />
      </a-form-item>
      <a-form-item label="设备编号" :rules="[{ required: true, message: '请输入设备编号' }]">
        <a-input v-model:value="formData.code" placeholder="请输入设备编号" />
      </a-form-item>
      <a-form-item label="IP地址">
        <a-input v-model:value="formData.ip" placeholder="请输入IP地址" />
      </a-form-item>
      <a-form-item label="所属区域">
        <a-select v-model:value="formData.regionName" placeholder="请选择所属区域" @change="handleRegionChange">
          <a-select-option v-for="region in regionList" :key="region.id" :value="region.name">{{ region.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="设备类型">
        <a-select v-model:value="formData.type" placeholder="请选择设备类型">
          <a-select-option v-for="type in deviceTypeList" :key="type.dictValue" :value="type.dictValue">{{ type.dictLabel }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="给支队预警时间">
        <a-input-number v-model:value="formData.warningTime" :min="0" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, defineEmits, defineProps, toRefs, watch, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { deviceInfoSave, deviceInfoForm, deviceInfoType } from '/@/api/safealarm/deviceInfo';
import { unitRegionListData } from '/@/api/unitmanage/unitRegion';

const emits = defineEmits(['deviceAdded', 'cancel']);
const props = defineProps<{
  parentKey: string | number | null;
  visible: boolean;
  parentName: string;
  parentUnitCode: string;
  editData: any;
}>();

const formData = ref({
  name: '',
  code: '',
  ip: '',
  regionName: '',
  regionId: '',
  type: '',
  warningTime: 0,
  enterpriseName: '',
  enterpriseId: ''
});

const regionList = ref([]);
const deviceTypeList = ref([]);

const fetchRegionList = async () => {
  try {
    const response = await unitRegionListData();
    regionList.value = response.list || [];
    console.log('regionList', response.list);
  } catch (error) {
    message.error('获取区域列表失败，请重试');
  }
};

const fetchDeviceTypeList = async () => {
  try {
    const response = await deviceInfoType();
    deviceTypeList.value = response||[]
   console.log('deviceTypeList.response', response);
  } catch (error) {
    message.error('获取设备类型列表失败，请重试');
  }
};

const handleRegionChange = (value) => {
  const selectedRegion = regionList.value.find(region => region.name === value);
  if (selectedRegion) {
    formData.value.regionId = selectedRegion.id;
  }
};

const handleOk = async () => {
  try {
    formData.value.enterpriseName = props.parentName;
    formData.value.enterpriseId = props.parentUnitCode;

    const response = await deviceInfoSave(formData.value);
    if (response.result === 'true') {
      message.success('设备新增/修改成功');
      emits('deviceAdded');
    } else {
      message.error('设备新增/修改失败');
    }
  } catch (error) {
    message.error('设备新增/修改失败，请重试');
  }
};

const handleCancel = () => {
  emits('cancel');
};

const { visible } = toRefs(props);

watch(visible, (newVisible) => {
  if (!newVisible) {
    formData.value = {
      name: '',
      code: '',
      ip: '',
      regionName: '',
      regionId: '',
      type: '',
      warningTime: 0,
      enterpriseName: props.parentName,
      enterpriseId: props.parentUnitCode
    };
  }
});

watch(() => props.editData, (newData) => {
  if (newData) {
    formData.value = {
      ...formData.value,
      ...newData,
      enterpriseName: props.parentName,
      enterpriseId: props.parentUnitCode
    };
  } else {
    formData.value = {
      name: '',
      code: '',
      ip: '',
      regionName: '',
      regionId: '',
      type: '',
      warningTime: 0,
      enterpriseName: props.parentName,
      enterpriseId: props.parentUnitCode
    };
  }
});

onMounted(() => {
  fetchRegionList();
  fetchDeviceTypeList();
});
</script>

<style scoped>
/* 这里可以添加样式 */
</style>